<style include="cr-shared-style iron-flex settings-shared md-select">
  #search-wrapper {
    align-items: center;
    display: flex;
    min-height: var(--settings-row-min-height);
  }
</style>
<settings-animated-pages id="pages" section="search"
    focus-config="[[focusConfig_]]">
  <div route-path="default">
    <!-- Omnibox search engine -->
    <div class="cr-row first">
      <div id="searchExplanation" class="flex cr-padded-text">
        $i18n{searchExplanation}
        <a href="$i18n{searchExplanationLearnMoreURL}"
            target="_blank">
          $i18n{learnMore}
        </a>
      </div>
      <template is="dom-if" if="[[isDefaultSearchControlledByPolicy_(
          prefs.default_search_provider_data.template_url_data)]]">
        <cr-policy-pref-indicator pref="[[
            prefs.default_search_provider_data.template_url_data]]">
        </cr-policy-pref-indicator>
      </template>
      <select class="md-select" on-change="onChange_"
          aria-labelledby="searchExplanation"
          disabled$="[[isDefaultSearchEngineEnforced_(
              prefs.default_search_provider_data.template_url_data)]]">
        <template is="dom-repeat" items="[[searchEngines_]]">
          <option selected="[[item.default]]">[[item.name]]</option>
        </template>
      </select>
    </div>
    <template is="dom-if"
        if="[[prefs.default_search_provider_data.template_url_data.extensionId]]">
      <div class="cr-row continuation">
        <extension-controlled-indicator
            class="flex"
            extension-id="[[
                prefs.default_search_provider_data.template_url_data.extensionId]]"
            extension-name="[[
                prefs.default_search_provider_data.template_url_data.controlledByName]]"
            extension-can-be-disabled="[[
                prefs.default_search_provider_data.template_url_data.extensionCanBeDisabled]]"
            on-disable-extension="onDisableExtension_">
        </extension-controlled-indicator>
      </div>
    </template>

    <!-- Manage search engines -->
    <cr-link-row class="hr" id="enginesSubpageTrigger"
        label="[[searchEnginesPageTitle_]]"
        on-click="onManageSearchEnginesTap_"
        role-description="$i18n{subpageArrowRoleDescription}"></cr-link-row>
  </div>
  <template is="dom-if" route-path="/searchEngines">
    <settings-subpage
        associated-control="[[$$('#enginesSubpageTrigger')]]"
        page-title="[[searchEnginesPageTitle_]]"
        search-label="$i18n{searchEnginesSearch}"
        search-term="{{searchEnginesFilter_}}">
      <settings-search-engines-page prefs="{{prefs}}"
          filter="[[searchEnginesFilter_]]">
    </settings-subpage>
  </template>
</settings-animated-pages>
